<template>
  <div class="nav_bar">
      <ul class="nav-list">
          <!-- router-link 是 vue-router 提供的标签，在模板中可以直接使用，用于改变浏览器地址，继而触发视图的修改 -->
          <!-- 用router-link为了跳转 active的类名作用？ -->
          <router-link tag="li" class="nav-list-item active" to="home">
              <i class="iconfont iconhome"></i>
              <span>首页</span>
          </router-link>
          <router-link tag="li" class="nav-list-item" to="category">
              <i class="iconfont icondilanxianxingiconyihuifu_huabanfuben1"></i>
              <span>分类</span>
          </router-link>
          <router-link tag="li" class="nav-list-item" to="cart">
              <i class="iconfont icondilanxianxingiconyihuifu_huabanfuben"></i>
              <span>购物车</span>
          </router-link>
          <router-link tag="li" class="nav-list-item" to="user">
              <i class="iconfont iconwode"></i>
              <span>我的</span>
          </router-link>
      </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.nav_bar {
    position: fixed;
    left:0;
    bottom:0;
    width: 100%;
    padding: 5px 0;
    z-index: 1000;
    background: #fff;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    .nav-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        padding: 0;
        .nav-list-item {
            display: flex;
            flex: 1;
            flex-direction: column;
            text-align: center;
            color: #666;
            &.router-link-active {
                color: #1baeae;
            }
            i {
                text-align: center;
                font-size: 22px;
            }
            span {
                font-size: 12px;
            }
        }
    }
}
</style>